import React, { Component } from 'react';

export default class Content extends Component {
  state = {
    currentIndex: -1
  }
  mouseMove = (flag,index) => {
    return () => {
      if (flag === 1)this.setState({currentIndex: index})
      if (flag === 2)this.setState({currentIndex: -1}) 
    }
  }
  checkChange = (todo) => {
    const {changeTodo} = this.props
    return (e) => {
      const todoObj = {
        id: todo.id,
        name: todo.name,
        done: e.target.checked
      }
      changeTodo(todoObj)
    }
  }
  deleteTodo = (todoId) => {
    const {delTodo} = this.props
    return (e) => {
      delTodo(todoId)
    }
  }
  render() {
    const { todos } = this.props;
    const {currentIndex} = this.state
    return (
      <ul className='todo-main'>
        {todos.map((todo, index) => {
          return (
            <li key={todo.id} onMouseEnter={this.mouseMove(1, index)} onMouseLeave={this.mouseMove(2, index)} style={{background: currentIndex === index ? '#ddd' : 'white'}}>
              <label>
                <input checked={todo.done} onChange={this.checkChange(todo)} type='checkbox' />
                <span>{todo.name}</span>
              </label>
              <button className='btn btn-danger' onClick={this.deleteTodo(todo.id)} style={{ display: currentIndex === index  ? 'block' : 'none' }}>
                删除
              </button>
            </li>
          );
        })}
      </ul>
    );
  }
}
